<template>
  <div>
    <el-dialog
      v-model="dialogTableVisible"
      :close-on-click-modal="false"
      width="70%"
      top="10vh"
      @close="close"
    >
      <div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 16px 0;
          "
        >
          <div style="font-size: 16px">事件详情</div>
          <div>
            <el-button plain @click="nextPage(null)">上一条</el-button>
            <el-button plain @click="nextPage('next')">下一条</el-button>
          </div>
        </div>
      </div>
      <div
        style="
          display: flex;
          height: 540px;
          padding: 10px;
          margin: 16px;
          border: 1px solid #c6cad1;
          border-radius: 5px;
        "
      >
        <div style="width: 75%">
          <el-image
            :src="porps.alarmList[porps.index].image"
            style="width: 100%; height: 100%"
            :preview-src-list="imgUrl"
            :initial-index="imgIndex"
            :infinite="false"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            fit="fill"
            @click="imgIndex = porps.index"
          />
        </div>
        <div style="width: 25%; padding: 0 0 0 10px; font-size: 16px">
          <div class="flex" style="margin-bottom: 5px">
            <div style="min-width: 80px">事件类型：</div>
            <div>{{ porps.alarmList[porps.index].event_type }}</div>
          </div>
          <div class="flex" style="margin-bottom: 5px">
            <div style="min-width: 80px">事件时间：</div>
            <div>{{ porps.alarmList[porps.index].updated_at }}</div>
          </div>
          <div class="flex" style="margin-bottom: 5px">
            <div style="min-width: 80px">事件地点：</div>
            <div>{{ porps.alarmList[porps.index].location }}</div>
          </div>
          <div class="flex" style="margin-bottom: 5px">
            <div style="min-width: 80px">事件设备：</div>
            <div>{{ porps.alarmList[porps.index].device_id }}</div>
          </div>
          <div class="flex" style="align-items: center; margin-bottom: 8px">
            <div style="min-width: 80px">处理结果：</div>
            <el-select
              v-model="processResult"
              clearable
              placeholder="请选择处理结果"
              style="width: 310px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="flex" style="margin-bottom: 5px">
            <div style="min-width: 80px">事件备注：</div>
            <div style="width: 100%">
              <el-input
                v-model="remark"
                style="width: 100%; margin-bottom: 8px"
                type="textarea"
                placeholder="请输入事件备注或者选择以下备注"
              />
              <div class="Label" @click="label">告警准确，正在处理事件</div>
              <div class="Label" @click="label">告警准确，已重复告警</div>
              <div class="Label" @click="label">告警准确，已处理完成</div>
              <div class="Label" @click="label">误报，已核实，无异常</div>
              <div class="Label" @click="label">误报，告警有误</div>
              <div class="Label" @click="label">
                误报，告警不准确，无异常情况
              </div>
              <div class="Label" @click="label">误报，暂不处理</div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 16px 16px;
        "
      >
        <div />
        <div>
          <el-button plain @click="close">关闭</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const dialogTableVisible = ref<any>(true);
const processResult = ref<string>("");
const imgIndex = ref<number>(0);
const remark = ref<string>("");
const emit = defineEmits(["close", "nextPageFn", "solvingAlarm"]);
const imgUrl = ref<string[]>([]);
const porps = defineProps<{
  alarmList: any[];
  index: number;
}>();
onMounted(() => {
  imgIndex.value = porps.index;
  imgUrl.value = [porps.alarmList[porps.index].image];
  porps.alarmList[porps.index].status === 1
    ? (processResult.value = "")
    : (processResult.value = porps.alarmList[porps.index].status);
  remark.value = porps.alarmList[porps.index].remark;
});
const close = () => {
  emit("close");
};
const nextPage = async (val: string | null) => {
  emit("nextPageFn", val);
};

const label = (e: any) => {
  remark.value = e.target.innerText;
};

const submit = async () => {
  emit("solvingAlarm");
};
const options = [
  {
    value: 2,
    label: "正报"
  },
  {
    value: 3,
    label: "误报"
  }
];

defineExpose({ remark, processResult, imgUrl });
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 0;
}

::v-deep .el-icon svg {
  width: 2rem !important;
  height: 2rem !important;
}

::v-deep .el-textarea__inner {
  min-height: 80px !important;
  max-height: 80px;
}

::v-deep .el-image-viewer__prev {
  display: none !important;
}

::v-deep .el-image-viewer__next {
  display: none !important;
}

.Label {
  height: 32px;
  padding: 0 0 0 8px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 32px;
  color: var(--el-button-text-color);
  cursor: pointer;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
}

.Label:hover {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-7);
}
</style>
